<template>
	<div class="tmpl">
		<!-- {{this.$route.params.id}} -->
		<div class="title">
			<p class="ptitle" v-text='article.title'></p>
			<p class="otitle">
				{{article.add_time | fmtdate('YYYY-MM-DD')}}
				{{article.click}}次浏览
				分类:经济民生
			</p>
		</div>
		<div class="content" v-html='article.content'></div>
		
		<!-- 3.0评论组件的使用 -->
		<div>
			<!-- 使用评论组件 -->
			<subcomment :artid='artid'></subcomment>
		</div>
	</div>
</template>

<script>
	import common from '../../kits/common.js';
	// 1.0 导入评论组件
	import subcomment from '../subcomp/subcomment.vue';
	export default{
		data(){
			return{
				article:{},
				artid:0, //3.0定义评论组件要接收的 数据
			}
		},
		components:{
			subcomment // 2.0将评论组件注册为私有属性
		},
		created(){
			this.getdata();
			// 4.0 获取到url传入的id值
			this.artid = this.$route.params.id;
		},
		methods:{
			getdata(){
				// 扶着根据传入的id值从 /api/getnew/:newid去获取到真正的数据
				// 1.0 获取到url传入的id值
				let id = this.$route.params.id;
				// 2.0 拼接url
				let url = common.apihost + '/api/getnew/' + id;
				// 3.0 ajax请求获得数据
				this.$http.get(url).then(res=>{
					// 获取图文资讯对象
					this.article = res.body.message[0];
				},res=>{
					console.log('获取图文资讯详情失败');
				});
			}
		}
	}
</script>

<style scoped>
	.title {
		height: 100px;
		border-bottom: 2px solid rgba(92,92,92,0.1);
		padding: 5px;
	}
	.title .ptitle {
		font-size: 16px;
		font-weight: bold;
		color: blue;	
	}
	.title .otitle {
		font-size: 12px;
		color: rgba(92,92,92,0.8);
	}
	.content{
		padding: 5px;
	}
</style>
